import QtQuick 1.0

Rectangle {
    id: intro
    width: 300
    height: 300
    color: "transparent"
    radius: 10
    border.color: "skyblue"
    border.width: 4

    Rectangle {
        width: parent.width
        height: parent.height
        color: "white"
        radius: 10
        opacity: 0.8
    }

    Column {
        Image {
            width: intro.width
            height: 180
            source: "qrc:/Images/chicken.png"
            fillMode: Image.PreserveAspectFit
            smooth: true
        }

        // Spacing line
        Rectangle {
            width: intro.width
            height: 4
            color: "skyblue"
        }

        Item {
            width: intro.width
            height: 32

            Text {
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                font.pointSize: 14
                text: "鸡腿肉"
            }
            Text {
                anchors.right: parent.right
                anchors.rightMargin: 6
                anchors.verticalCenter: parent.verticalCenter
                font.pointSize: 14
                text: "温和"
            }
        }

        // Spacing line
        Rectangle {
            width: intro.width
            height: 4
            color: "skyblue"
        }

        TextEdit {
            width: intro.width - 6
            height: 80
            x: 4
            font.pointSize: 14
            wrapMode: TextEdit.Wrap
            cursorVisible: false
            readOnly: true
            text: "传说中剑哥邻居家小弟弟的姑妈的侄子学校旁边的凯哥养的鸡。肉质肥美。居家旅行访亲探友必备之佳品"
        }
    }

    state: "hide"

    states: [
        State {
            name: "hide"
            PropertyChanges {
                target: intro
                opacity: 0

            }
        },
        State {
            name: "show"
            PropertyChanges {
                target: intro
                opacity: 0.8
            }
        }
    ]

    transitions: [
        Transition {
            from: "hide"
            to: "show"
            reversible: true

            PropertyAnimation {
                target:intro;
                property: "opacity";
                duration: 600;
            }
        }
    ]

    MouseArea {
        anchors.fill: parent
        onClicked:  intro.state = "hide"
    }
}
